<template>
	<u-popup :show="visible" :round="10" mode="bottom">
		<view class="">
			<view class="popup">
				 <view class="tip">
					<image src="@/static/my/zy.png" mode="widthFix"></image>
					<text>注销账号后以下信息将被清空且无法找回！</text>
				 </view>
				 
				 <view class="box">
					<view v-for="item in list" :key="item">
						· {{item}}
					</view>
				 </view>
				 
				 <view class="txt">
					先确保所有交易已完成且无纠纷，账号注销后的历史 交易可能产生的资金退回权益将视作自动放弃
				 </view>
				 
				 <view class="btn" @click="signOut(true)">
					确认注销账号
				 </view>
				 
				 
			</view>
			<view style="height: 8rpx;background: #F8F8F8;"></view>
			<view class="btn2" @click="signOut(false)">
				取消
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	export default {
		name:"woods-popupModal",
		props: {
			 
			show:{ 
				type:Boolean,
				default:false
			}, 
		},
		watch:{
			show(flag) {
				this.visible=flag
			},
			
		},
		data() {
			return {
				visible:false,
				list:[
					"身份账号信息",
					"订单记录",
					"优惠券、积分、洁净币余额等"
				]
			};
		},
		methods:{
			/*
			@description 回调事件
			@extends {flag=true 确认 flag:false 取消}
			*/ 
			signOut(flag){
				this.$emit("signOut",flag)
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.box{
		background: #F8F8F8;
		border-radius: 20rpx ;
		padding: 30rpx 40rpx;
		margin-top: 30rpx;
		view{
			font-weight:500;
			font-size: 28rpx;
			color: #333333;
			line-height: 60rpx;
		}
	}
	.txt{
		font-weight: 400;
		font-size: 28rpx;
		color: #AAAAAA;
		padding: 20rpx;
	}
	.btn{
		font-weight: bold;
		font-size: 32rpx;
		color: #277EEF;
		line-height: 68rpx;
		text-align: center;
		margin-top: 15rpx;
	}
}
.btn2{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	line-height: 98rpx;
	text-align: center;
}
</style>